<template>
  <div class="visitor-credentials">
    <div class="visitor-credentials__header">
      <div class="visitor-credentials__header__avatar">
        <el-image
          v-if="companyInfo?.logo"
          style="height: 60px;"
          :src="companyInfo?.logo"
          fit="contain"
        />

        <div v-else>
          {{ companyInfo?.name }}
        </div>
      </div>
      <!--      <div class="visitor-credentials__header__name">-->
      <!--        {{ companyInfo?.name }}-->
      <!--      </div>-->
    </div>

    <div class="visitor-credentials__content">
      <div class="welcome mb">
        您好，{{ visitorInfo?.visitor }} 来宾
      </div>
      <div class="company-name mb">
        欢迎莅临{{ companyInfo?.name }}
      </div>

      <div class="info mb">
        <div class="info__block">
          <div class="info__block__key">时间</div>
          <div class="info__block__value">
            {{ timeFormat(visitorInfo?.arrive_time) }}
          </div>
        </div>

        <div class="info__block">
          <div class="info__block__key">人数</div>
          <div class="info__block__value">
            {{ visitorInfo?.fellow }}
          </div>
        </div>
      </div>

      <div class="info mb">
        <div class="info__block">
          <div class="info__block__key">对接人</div>
          <div class="info__block__value">
            {{ visitorInfo?.docking?.username }}
          </div>
        </div>

        <div class="info__block">
          <div class="info__block__key">对接部门</div>
          <div class="info__block__value">
            {{ visitorInfo?.department?.name }}
          </div>
        </div>
      </div>

      <div class="visitor-credentials__content__split mb">
        <div class="circle" />
        <div class="line" />
        <div class="circle" />
      </div>

      <div class="success-icon">
        <svg-icon icon-class="success-icon" class-name="icon" />

        <div class="success-icon__tips">核验通过</div>
      </div>
    </div>

    <div class="time">
      {{ nowTime }}
    </div>
  </div>
</template>
<script>
import { companyInfo } from '@/api/basic'
import { getVisitList } from '@/api/visitor'
import dayjs from 'dayjs'

export default {
  name: '',
  data() {
    return {
      query: {
        id: null,
        company_id: null
      },
      companyInfo: null,
      visitorInfo: null,
      nowTime: null
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.getNowTime()
  },
  methods: {
    init() {
      const data = this.$route.query
      this.query.id = this.$route.params.id
      this.query.company_id = data.company

      this.getCompanyInfo()
      this.getVisitInfo()
    },
    async getCompanyInfo() {
      try {
        const res = await companyInfo(this.query.company_id)
        this.companyInfo = res.data
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    async getVisitInfo() {
      try {
        const res = await getVisitList({ id: this.query.id })
        this.visitorInfo = res.data
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    timeFormat(time) {
      const t = dayjs(time)
      const M = t.month() + 1 >= 10 ? t.month() + 1 : `0${t.month() + 1}`
      const D = t.date() >= 10 ? t.date() : `0${t.date()}`
      const H = t.hour() >= 10 ? t.hour() : `0${t.hour()}`
      const m = t.minute() >= 10 ? t.minute() : `0${t.minute()}`

      return `${M}月${D}日 ${H}:${m}`
    },

    getNowTime() {
      this.nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss')

      setInterval(() => {
        this.nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.visitor-credentials {
  padding: 20px;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &__header {
    display: flex;
    justify-content: center;
    align-items: center;
    &__avatar {
      margin-right: 5px;
    }
  }

  &__content {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;

    .mb {
      margin-bottom: 20px;
    }

    .welcome {
      font-size: 20px;
      font-weight: bold;
    }

    .info {
      display: flex;
      width: 100%;

      &__block {
        width: 50%;

        &__key {
          margin-bottom: 10px;
          font-size: 14px;
          color: #909399;
        }
      }
    }

    &__split {
      position: relative;
      display: flex;
      align-items: center;

      .circle {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #f5f5f5;

        &:first-child {
          left: -32px;
        }

        &:last-child {
          right: -32px;
        }
      }

      .line {
        flex: 1;
        height: 1px;
        position: relative;

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to right, transparent 50%, #ccc 0) repeat-x;
          background-size: 8px 1px;
        }
      }
    }

    .success-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .icon {
        width: 120px;
        height: 120px;
      }

      &__tips {
        margin-top: 10px;
        color: #66C23A;
        font-weight: bold;
      }
    }
  }

  .time {
    margin-top: 20px;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
  }

}
</style>
